/* 点击搜索弹出框并遮罩显示 */
var search = document.querySelector(".search");
var searchmask = document.querySelector(".searchmask");
var search_ipt = document.querySelector(".search_ipt")
function showSearch() {
    search.style.height = 300 + "px";
    search_ipt.style.display = "block";
    searchmask.style.display = "block";
}
function delBtn() {
    search.style.height = 0 + "px";
    search_ipt.style.display = "none";
    searchmask.style.display = "none";
}
function searchBtn() {
    //点击搜索按钮调转页面
    location.href = "../html/allgoods.html";
}
/* 购物袋 */
var bag=document.querySelector(".bag");
var car=document.querySelector(".car");
var pont=document.querySelector(".pont");
bag.onmousemove=function(){
    car.style.display="block";
    pont.style.display="none";
}
car.onmouseleave=function(){
    car.style.display="none"
    pont.style.display="block";
}
var carbtn=document.querySelector(".car button");
/* 指引 */
var up=document.querySelector(".up");
up.onclick=function(){
    document.documentElement.scrollTop=0;
}
/* 导航 */
var ulbtn=document.querySelectorAll(".ulbtn");
var ulnav=document.querySelectorAll(".ulnav");
var page=0;
ulbtn.forEach(function(libtn,i){
    var n=0;
    libtn.onclick=()=>{
        if(n==0){
            ulnav[i].style.display="block";
        n=1;
        }else{
            ulnav[i].style.display="none";
            n=0;
        }
        ulnav.forEach(function(v,j){
            if(i!=j){
                v.style.display="none";
                n=0;
            }
        })
        page=i;
    }

})
var navline=document.querySelector(".navline");
var navlist=document.querySelector(".navlist");
navline.onmousemove=function(){
    navlist.style.display="block";
    navline.style.display="none";
}
navlist.onmouseleave=function(){
    navline.style.display="block";
    navlist.style.display="none";
}


/* 登录 */
var login_mask=document.querySelector(".login_mask");
var login_else=document.querySelector(".login_else");
function userLogin(){
    login_mask.style.display="block";
    document.body.style.overflowY="hidden";
    pont.style.display="none";
}
login_else.onclick=function(){
    login_mask.style.display="none";
    pont.style.display="block";
    document.body.style.overflowY="unset";
}
/* 登录ajax */
var signipt=document.querySelectorAll(".login input");
var signbtn=document.querySelector(".login button");
var prompt=document.querySelector(".prompt");
/* 正则判断 */
var isname=0;
signipt[0].onkeyup=function(){
    var res=/^(\w|[\u2E80-\u9FFF]){3,6}$/.test(signipt[0].value);
    if(res){
        isname=1;        
    }else{
        isname=0;
    }
}
var ispassword=0;
signipt[1].onkeyup=function(){
    var res=/^\w{6,12}$/.test(signipt[1].value);
    if(res){
        ispassword=1;
    }else{
        ispassword=0;
    }
}
signbtn.onclick=function(){
    if(isname==1&&ispassword==1){
        var username=signipt[0].value;
        var password=signipt[1].value;
        axios.get(SignApi,{params:{username,password}}).then(function(res){
            console.log(res.data);
            if(res.data.code==0){
                signipt[1].nextElementSibling.innerHTML=res.data.msg;
                prompt.style.display="block";
            }else{
                alert("登录成功");
                localStorage.setItem("username",JSON.stringify(signipt[0].value));
                localStorage.setItem("password",JSON.stringify(signipt[1].value));
                location.reload();
            }
        })
    }else{
        signipt[1].nextElementSibling.innerHTML="请检查用户或密码";
        prompt.style.display="block";
    }
}
/* 显示账户 */
var urname=JSON.parse(localStorage.getItem("username"));
var namespan=document.querySelector(".namespan");
var account=document.querySelector(".account");
var addname=document.querySelector(".addname");
if(urname){
    account.style.display="none";
    namespan.style.display="inline-block";
    addname.innerHTML=urname;
    function exitName(){
        namespan.style.display="none";
        account.style.display="inline-block";
        localStorage.removeItem("username");
        localStorage.removeItem("password");
    }

}else{
    namespan.style.display="none";
    account.style.display="inline-block";
}

/* 筛选价格 */
var screen=document.querySelector(".screen");
var n=0;
function screenBtn(){
    if(n==0){
    screen.style.display="block";
    n=1;
    }else{
    screen.style.display="none";
    n=0;
    }
}

/* 首页展示商品 */
function showgoods(){
    var html="";
    var allgoods=document.querySelector(".goods");
    var goodsnum=document.querySelector(".goodsnum");
    //pagesize默认为20  <span onclick=addOne(${v.pid})"></span>
    axios.get(ShowGoods,{params:{uid:"66673",pagesize:50}}).then(function(res){
        var goods=res.data.data;
        goods.forEach((v,i)=>{
            html+=`<div class="goodsfour"     
        <ul>
        <li><img src="${v.pimg}" alt="" class="goodsimg" onclick="goodsDetails(this,${v.pid})"></li>
        <span class="iconfont icon-gouwudai1" onclick=addOne(this,${v.pid})></span>
        <li>${v.pname}</li>
          <li>${v.pprice}</li>
        </ul>
      </div>`
        })
        allgoods.innerHTML=html;
        goodsnum.innerHTML=goods.length;
    })
}
showgoods();
/* 点击更换排列 */
var two=document.querySelector(".two");
var four=document.querySelector(".four");
two.onclick=function(){
    var goodsfour=document.querySelectorAll(".goodsfour");
    goodsfour.forEach(function(v){
    v.classList.toggle("goodstwo");
    v.classList.remove("goodsfour");
    })
    four.style.color="black";
    two.style.color="blue";
}
four.onclick=function(){
    var goodstwo=document.querySelectorAll(".goodstwo");
    goodstwo.forEach(function(v){
        v.classList.toggle("goodsfour");
        v.classList.remove("goodstwo");
        })
    four.style.color="blue";
    two.style.color="grey";
}
/* 点击商品图片跳转到详情页面 */
function goodsDetails($this,id){
    console.log($this);//这里不能用this,会被当成window
    console.log(id);
    location.href=`../html/details.html?pid=${id}`;
}

